<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String rootPath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+"/";
%>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自在生活</title>
		<link rel="stylesheet" href="<%=basePath %>css/bootstrap.min.css"></link>
		<link rel="stylesheet" href="<%=basePath %>css/swiper-3.3.1.min.css" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
		<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
		<style>
			body {
		        background: #eee;
		        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
		        font-size: 14px;
		        color:#000;
		        margin: 0;
		        padding: 0;
		    }
		    html, body {
				height:100%;
				font-size: 10pt;
				background : #eee; 
			}
			h1 {
				font-size: 18pt;
			}
			h2 {
				font-size: 14pt;
			}
				.warning {
				font-weight: bold;
			}
			
		    .swiper-container {
		        width: 100%;
		        height: 224px;
		        margin: 20px auto;
		    }
		    .swiper-slide {
		        text-align: center;
		        font-size: 18px;
		        /* Center slide text vertically */
		        display: -webkit-box;
		        display: -ms-flexbox;
		        display: -webkit-flex;
		        display: flex;
		        -webkit-box-pack: center;
		        -ms-flex-pack: center;
		        -webkit-justify-content: center;
		        justify-content: center;
		        -webkit-box-align: center;
		        -ms-flex-align: center;
		        -webkit-align-items: center;
		        align-items: center;
		    }
			.navbar-default{
				border: 0px;
			}
			.piclun {
				width: 200%;padding-left: 0px;
			}
			.piclun li{
				display: inline-block;;
			}
			.piclun li img{
				float: left;
			}
			a{color: #FFF;}
			a:focus, a:hover{color: #888888;text-decoration: none;}
			@media screen and (max-width: 450px) {
				.swiper-container {
		        height: 54px;
		   		}
		   		.swiper-container{
		   			margin:10px auto
		   		}
			}
		</style>
	</head>
	<body>
		<div style="background-color: #25292c;">
			
			<div class="navbar navbar-inverse" style="margin-bottom: 0px">
				<div class="container-fluid" style="color: #FFFFFF;">
					<!--<ul class="nav navbar-nav">
						<li class="col-md-1 col-md-offset-4"></li>
						<li><a href="#" style="color: #FFFFFF;">智能家居</a></li>
						<li><a href="#" style="color: #FFFFFF;">APP下载</a></li>
						<li><a href="#" style="color: #FFFFFF;">关于我们</a></li>
					</ul>-->
					<div class="row" style="margin: 15px 0px;">
						<div class="col-xs-3 col-sm-1 col-sm-offset-3">
							<a href="<%=basePath %>home">
								<img src="images/logo.png" style="width: 15px;" />
							</a>
						</div>
						<div class="col-xs-3 col-sm-2">
							<a href="<%=basePath %>panorama">智能家居</a>
						</div>
						<div class="col-xs-3 col-sm-2">
							<a href="<%=basePath %>download">APP下载</a>
						</div>
						<div class="col-xs-3 col-sm-2">
							<a href="<%=basePath %>aboutUs">关于我们</a>
						</div>
					</div>
				</div>
			</div>
			<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
			  <!-- Indicators -->
			  <ol id="carouselIddicat" class="carousel-indicators">
			   <!--  <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
			    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
			    <li data-target="#carousel-example-generic" data-slide-to="2"></li> -->
			  </ol>
			
			  <!-- Wrapper for slides -->
			  <div id="carouselList" class="carousel-inner" role="listbox">
			   <%--  <div class="item active">
			      <img src="<%=basePath %>images/C5AD.tm.png" alt="...">
			      <div class="carousel-caption">
			      </div>
			    </div>
			    <div class="item">
			      <img src="<%=basePath %>images/BEEB.tm.png" alt="...">
			      <div class="carousel-caption">
			      </div>
			    </div>
			    <div class="item">
			      <img src="<%=basePath %>images/C5AD.tm.png" alt="...">
			      <div class="carousel-caption">
			      </div>
			    </div> --%>
			  </div>
			
			  <!-- Controls -->
			  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
			    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
			    <span class="sr-only">Previous</span>
			  </a>
			  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
			    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
			    <span class="sr-only">Next</span>
			  </a>
			</div>
			<!--<ul id="picUl" class="piclun">
				<li class="lunbo">
					<img src="images/红外伴侣-1440-648_11.jpg" width="500px" />
				</li>
				<li class="lunbo">
					<img src="images/红外伴侣-1440-648_03.jpg" width="500px"/>
				</li>
				<li class="lunbo">
					<img src="images/红外伴侣-1440-648_03.jpg" width="500px"/>
				</li>
				<li class="lunbo">
					<img src="images/BEEB.tm.png" width="500px"/>
				</li>
			</ul>-->
			<div id="commodityContainer" class="swiper-container">
			    <div id="commodityPic" class="swiper-wrapper">
			    	<!-- <div class="swiper-slide" ><img src="images/红外伴侣-1440-648_11.jpg" style="width:33%"/></div>
			        <div class="swiper-slide"><img src="images/红外伴侣-1440-648_03.jpg" style="width:33%"/></div>
			        <div class="swiper-slide"><img src="images/红外伴侣-1440-648_03.jpg" style="width:33%"/></div>
			        <div class="swiper-slide"><img src="images/红外伴侣-1440-648_03.jpg" style="width:33%"/></div>
			        <div class="swiper-slide"><img src="images/红外伴侣-1440-648_03.jpg" style="width:33%"/></div>
			        <div class="swiper-slide"><img src="images/红外伴侣-1440-648_03.jpg" style="width:33%"/></div>
			        <div class="swiper-slide"><img src="images/红外伴侣-1440-648_03.jpg" style="width:33%"/></div>
			        <div class="swiper-slide"><img src="images/红外伴侣-1440-648_03.jpg" style="width:33%"/></div>
			        <div class="swiper-slide" ><img src="images/红外伴侣-1440-648_03.jpg" style="width:33%"/></div>
			        <div class="swiper-slide" ><img src="images/红外伴侣-1440-648_03.jpg" style="width:33%"/></div> -->
			    </div>
		    <!-- 如果需要分页器 -->
			</div>
			<div class="footer text-muted" style="padding: 21px 0px;">
				<div class="container-fluid">
					<div class="row" style="margin: 7px 0px;color: #cecdcb;">
						<div class="col-sm-12 " style="text-align: center;">
							 Copyright©2016 <a href="http://www.izzsh.com">izzsh.com</a> All Rights Reserved 广州市丰品信息科技有限公司
							 <span><script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1260439132'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s95.cnzz.com/z_stat.php%3Fid%3D1260439132%26show%3Dpic2' type='text/javascript'%3E%3C/script%3E"));</script></span>
						</div>
					</div>
				</div>
			</div>
		</div>
	<script src="<%=basePath %>js/jquery-1.9.1.min.js"></script>
	<script src="<%=basePath %>js/bootstrap.min.js"></script>
	<script src="<%=basePath %>js/swiper-3.3.1.min.js"></script>
<script>
	$(function(){
		/* 平台兼容 */
		 var system = { 
            win: false, 
            mac: false, 
            xll: false, 
            ipad:false,
            android:false,
            iPhone:false
        }; 
        //检测平台 
        var p = navigator.platform; 
        system.win = p.indexOf("Win") == 0; 
        system.mac = p.indexOf("Mac") == 0; 
        system.x11 = (p == "X11") || (p.indexOf("Linux") == 0); 
        system.ipad = (navigator.userAgent.match(/iPad/i) != null)?true:false; 
        system.android = (navigator.userAgent.match(/android/i) != null)?true:false; 
        system.iPhone = (navigator.userAgent.match(/iPhone/i) != null)?true:false; 
		 $.ajax({
				type:'Post',
				url:'<%=basePath%>'+'up/getPicList',
				data:{
					type:'1',    //图片类型：0-轮播图片，1-商品图片，2-关于我们，3-app下载
					isAble:'1', //isAble：0-不可用，1-可用
				    page:'1',
				    rows:'8'	//rows 商品传100（商品最大100张）
				},
				success:function(data){
					var res = $.parseJSON(data);
					var commodityList=document.getElementById('commodityPic');
					var list='';
					if(res.total!=0){
						var result=res.rows;
						if(system.iPhone || system.android){
							var commodityContainer=document.getElementById('commodityContainer');
							$("#commodityPic").hide();
							$.each(result,function(){
								list +='<a href="'+this.action+'"><img src="<%=rootPath %>'+this.path+'" style="width:99%" /></a>'
							});
							$("#commodityContainer").removeClass("swiper-container");
							commodityContainer.innerHTML=list;
						}else{
							$.each(result,function(){
								list +=' <div class="swiper-slide" ><a href="'+this.action+'"><img src="<%=rootPath %>'+this.path+'" style="width:99%" /></a></div>'
							})
							commodityList.innerHTML=list;
							var swiper = new Swiper('.swiper-container', {
						        pagination: '.swiper-pagination',
						        autoplay: 5000,
						        slidesPerView: 3,
						        paginationClickable: true,
						        spaceBetween: 30
							 });
						}
					}
				}
			});
		 $.ajax({
				type:'Post',
				url:'<%=basePath%>'+'up/getPicList',
				data:{
					type:'0',    //图片类型：0-轮播图片，1-商品图片，2-关于我们，3-app下载
					isAble:'1', //isAble：0-不可用，1-可用
				    page:'1',
				    rows:'100'	//rows 商品传100（商品最大100张）
				},
				success:function(data){
					var res = $.parseJSON(data);
					var list='';
					if(res.total!=0){
						var result=res.rows;
						var Alist=document.getElementById("carouselList");
						var indicator=document.getElementById("carouselIddicat");
						var indicat='';
					 	for(var i=0;i<res.total;i++){
							if(i==0){
								list+='<div class="item active"><a href="'+result[i].action+'">';
								indicat+=' <li data-target="#carousel-example-generic" data-slide-to="'+i+'" class="active"></li>';
							}else{
								list+='<div class="item"><a href="'+result[i].action+'">';
								indicat+=' <li data-target="#carousel-example-generic" data-slide-to="'+i+'"></li>';
							}
								list+='<img src="<%=rootPath %>'+result[i].path+'" alt="...">'
										+'<div class="carousel-caption"></div>'
										+'</a> </div>';
						} 
						Alist.innerHTML=list;
						indicator.innerHTML=indicat;
					}
				}
			});
	})
</script>
<!-- 
	
 -->
	</body>
</html>
